<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子组件使用</title>
    <script crossorigin src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script crossorigin src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script crossorigin src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

   <div id="example"></div>
   <script type="text/babel">


       class  SetBoardColor extends React.Component{
           render(){
               return(<div  className="SetBoardColor" style = {{backgroundColor:this.props.color}}>
               {this.props.children}
                   </div>);
            }
           }
       
       function Diglog(){
           return(
                 <SetBoardColor color='red'>

                     <h1>这是子组件的一个标题</h1>
                     <p>这是子组件的一个段落</p>

                 </SetBoardColor>
           );
       }



       //要将React元素呈现到根DOM节点，请将两者都传递给ReactDOM.render()
       ReactDOM.render(
           <Diglog/>,
           document.getElementById('example')
       );
   </script>


</body>
</html>